<template>
	<div class="app-container">
		<!-- 搜索栏 -->
		<el-form :inline="true" :model="query" class="demo-form-inline">
			<el-form-item label="商品名称">
				<el-input v-model="query.productName" placeholder="请输入商品名称" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleSearch">搜索</el-button>
				<el-button type="success" @click="handleAdd">新增商品</el-button>
			</el-form-item>
		</el-form>

		<!-- 表格 -->
		<el-table :data="shopProductsList" border style="width: 100%">
			<el-table-column prop="id" label="ID" width="80"></el-table-column>
			<el-table-column prop="productName" label="商品名称"></el-table-column>
			<el-table-column prop="type" label="类型"></el-table-column>
			<el-table-column prop="price" label="价格"></el-table-column>
			<el-table-column prop="stock" label="库存"></el-table-column>
			<el-table-column label="商品图片" width="120">
				<template slot-scope="scope">
					<el-image :src="baseUrl + scope.row.coverUrl" :preview-src-list="[baseUrl + scope.row.coverUrl]" style="width: 60px; height: 60px"></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="description" label="描述"></el-table-column>
			<el-table-column label="状态" width="100">
				<template slot-scope="scope">
					<el-tag :type="scope.row.isActive ? 'success' : 'info'">
						{{ scope.row.isActive ? "上架" : "下架" }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="200">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="query.pageNum"
			:page-sizes="[10, 20, 50, 100]"
			:page-size="query.pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
			class="pagination-container">
		</el-pagination>

		<!-- 添加/编辑对话框 -->
		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
			<el-form :model="form" :rules="rules" ref="form" label-width="100px">
				<el-form-item label="商品名称" prop="productName">
					<el-input v-model="form.productName"></el-input>
				</el-form-item>
				<el-form-item label="类型" prop="type">
					<el-input v-model="form.type"></el-input>
				</el-form-item>
				<el-form-item label="价格" prop="price">
					<el-input-number v-model="form.price" :precision="2" :step="0.1" :min="0"></el-input-number>
				</el-form-item>
				<el-form-item label="库存" prop="stock">
					<el-input-number v-model="form.stock" :min="0"></el-input-number>
				</el-form-item>
				<el-form-item label="商品图片" prop="coverUrl">
					<ImageUpload v-model="form.coverUrl" />
				</el-form-item>
				<el-form-item label="描述" prop="description">
					<el-input type="textarea" v-model="form.description"></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="isActive">
					<el-switch v-model="form.isActive"></el-switch>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { getShopProductsList, createShopProducts, deletShop } from "@/api/lv/shop";
import ImageUpload from './../../components/ImageUpload/index.vue'

export default {
	data() {
		return {
			shopProductsList: [],
			total: 0,
			query: {
				pageNum: 1,
				pageSize: 10,
				productName: ""
			},
			baseUrl: process.env.VUE_APP_BASE_API,

			dialogVisible: false,
			dialogTitle: "",
			form: {
				productName: "",
				type: "",
				price: 0,
				stock: 0,
				coverUrl: "",
				description: "",
				isActive: true
			},
			rules: {
				productName: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
				type: [{ required: true, message: "请输入商品类型", trigger: "blur" }],
				price: [{ required: true, message: "请输入价格", trigger: "blur" }],
				stock: [{ required: true, message: "请输入库存", trigger: "blur" }]
			}
		};
	},
	mounted() {
		this.getShopProductsList();
	},
	methods: {
		getShopProductsList() {
			getShopProductsList(this.query).then((res) => {
        this.shopProductsList = res.data.records;
				this.total = res.data.total;
			});
		},

		handleSearch() {
			this.query.pageNum = 1;
			this.getShopProductsList();
		},

		handleSizeChange(val) {
			this.query.pageSize = val;
			this.getShopProductsList();
		},

		handleCurrentChange(val) {
			this.query.pageNum = val;
			this.getShopProductsList();
		},

		handleAdd() {
			this.dialogTitle = "添加商品";
			this.form = {
				productName: "",
				type: "",
				price: 0,
				stock: 0,
				coverUrl: "",
				description: "",
				isActive: true
			};
			this.dialogVisible = true;
		},

		handleEdit(row) {
			this.dialogTitle = "编辑商品";
			this.form = JSON.parse(JSON.stringify(row));
			this.dialogVisible = true;
		},

		handleDelete(row) {
			this.$confirm("确认删除该商品吗？", "提示", {
				type: "warning"
			}).then(() => {
				deletShop(row.id).then(() => {
					this.$message.success("删除成功");
					this.getShopProductsList();
				});
			});
		},

		handleUploadSuccess(res) {
			this.form.coverUrl = res.data;
		},

		submitForm() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					createShopProducts(this.form).then(() => {
						this.$message.success(this.form.id ? "更新成功" : "添加成功");
						this.dialogVisible = false;
						this.getShopProductsList();
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.app-container {
	padding: 20px;
}

.pagination-container {
	margin-top: 20px;
	text-align: right;
}

.avatar-uploader {
	:deep(.el-upload) {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;

		&:hover {
			border-color: #409eff;
		}
	}
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
}

.avatar {
	width: 100px;
	height: 100px;
	display: block;
}
</style>
